<template>
  <div class="more-item">
      <p class="title">项目</p>
      <ul v-if="list">
         <li  v-for="value in list" 
          :key='value[0].id' 
          :data-id="value[0].id"
          @click="handledata(value[0])" 
          :to="`/detail/${value[0].id}`"
         >
          <div>
           <img :src="value[0].verticalPic" alt="">  
             </div> 
             <div>
                <h3>{{value[0].name}}</h3>
                <p> {{value[0].venuecity}} / {{value[0].showtime}} / {{value[0].venue}}</p>
                <h4>{{value[0].price_str}}</h4>     
                </div> 
         </li>         
      </ul> 
      <div class="list-no" v-else>
          暂无收藏的项目哦
      </div>
   </div>
</template>

<script>

export default {
    data () {
        return {
            
        }
    },
    computed: {
        list(){
            return this.$store.state.mylist
        }
    },
    mounted () {      
        
    }
}
</script>

<style lang="stylus" scoped>
  .more-item
          width 100%
          overflow hidden
          height 100%
          background white
          .title
           height 0.8rem
           background #ff1268
           font-size 0.4rem
           line-height 0.8rem
           color #fff
           text-align center
          ul
           width 100%
           overflow hidden
           padding 0 0.4rem  0  0.4rem
           overflow scroll
           li
            display flex
            flex-direction row 
            height 2.4rem
            width 100%
            margin-top 0.4rem
            >div:first-child
               font-size 0
               height 0
               padding-bottom  1.3296%              
               img 
                width 1.82rem
                height  2.42rem    
            >div:last-child
               position relative
               padding-left 0.24rem
               width 100%
               h3
                font-size 0.32rem
                width 90%            
               p
                overflow hidden              
                width  90%
                font-size 0.24rem
                color #aaaaaa
                padding-top 0.12rem         
                text-overflow ellipsis
                white-space nowrap
               h4
                font-size 0.28rem
                color #ff1268
                position absolute
                bottom 0.1rem

        .list-no {
            font-size 0.4rem
            text-align center
            margin-top 1.5rem
            }       
</style>